<template>
  <view>
    <productConSwiper :imgUrls="imgUrls" height="190px"></productConSwiper>
    <view class="info">
      <view>
        <view class="name">{{info.title}}</view>
        <view class="desc">状态：
          <text v-if="info.status == 1">未开始</text>
          <text v-if="info.status == 2">活动进行中</text>
          <text v-if="info.status == 3">活动已结束</text>
        </view>
        <view class="desc">{{info.joinCount}}人已参加/{{info.like_number}}收藏</view>
        <view class="desc">¥{{ info.price }}</view>
      </view>

      <view class="shoucang" @click="onLike">
        <view
            v-if="0"
            class="iconfont icon-shoucang1"
        ></view>
        <view v-else class="iconfont icon-shoucang"></view>
        <view>{{info.isLike ? '已' : ''}}收藏</view>
      </view>
    </view>

    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动时间
        <text class="atterTxt">{{info.start_time | formatDate}}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>
    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动地址
        <text class="atterTxt">{{ info.address }}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>
    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动人数
        <text class="atterTxt">最多{{info.person_num}}人</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>

    <view class="notice-title">活动详情</view>
    <view v-if="description" class="content">
      <jyf-parser
          ref="article"
          :domain="domain"
          :html="description.replace(/<br\/>/gi, '')"
          :tag-style="tagStyle"
      ></jyf-parser>
    </view>
    <view v-if="info.user_name" class="notice-title">目前有{{info.user_name}}等{{ info.joinCount }}位用户已报名</view>
    <view class="users acea-row" v-if="info.joinList">
      <image class="avatar" v-for="(item, index) in info.joinList" :key="index" :src="item.avatar"></image>
    </view>
    <view style="height: 80px;"></view>
    <view class="bnt acea-row fixed-bottom">
      <button class="joinCart btns" :class="{radius: showBuy == false}" 	open-type="share">分享给好友</button>
      <button v-if="showBuy" class="buy btns" form-type="submit" @click="onSubmit">报名</button>
    </view>
  </view>
</template>

<script>
import productConSwiper from "@/components/productConSwiper/index.vue";
import {HTTP_REQUEST_URL} from "@/config/app";
import {activityLikeActivity, getActivityInfo} from "@/api/2_activity";
import {str2arr} from "@/utils";
const app = getApp();
export default {
  components: {productConSwiper},
  data() {
    return {
      info: {},
      imgUrls: [],
      domain: HTTP_REQUEST_URL,
      description: '',
      tagStyle: {
        img: "width:100%;display:block;",
      },
       showBuy: app.globalData.temp_status != 1
    };
  },
  onLoad(options) {
    this.id = options.id
    getActivityInfo(this.id).then(res => {
      let {data} = res
      this.info = data
      this.imgUrls = str2arr(data.banner)
      this.description = data.content
    })
  },
  methods: {
    onLike(){
      activityLikeActivity(this.id).then(res=>{
        if(this.info.isLike == 0){
          this.info.isLike = 1
          this.$util.Tips({
            title: '收藏成功'
          });
        }else{
          this.info.isLike = 0
          this.$util.Tips({
            title: '取消收藏成功'
          });
        }
      })
    },
    onSubmit() {
      if(this.info.isJoin == 1){
        uni.showToast({icon: 'none', title: '您已报名此活动'})
        return
      }
      uni.navigateTo({
        url: `/pages/2_development/activity/pay?id=${this.id}&title=${this.info.title}&price=${this.info.price}&picture=${this.imgUrls[0]}`
      })
    }
  }
};
</script>

<style lang="scss">
@import "../../index/style/main.scss";

.bnt {
  margin: 30rpx;
}

.btns {
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.joinCart {
  flex: 1;
  border-radius: 50rpx 0 0 50rpx;
  background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
  &.radius{
    border-radius: 50rpx;
  }
}

.buy {
  flex: 1;

  border-radius: 0 50rpx 50rpx 0;
  background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.users {
  padding-left: 30rpx;
  flex-wrap: wrap;
  /* #ifdef MP */
  margin-top: 0;
  /* #endif */
  /* #ifdef H5 */
  margin-top: 0;

  /* #endif */
  .avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    margin-right: 3%;
    margin-top: 20rpx;

    height: 80rpx;
    width: 80rpx;
    border-radius: 40rpx;
    background: #eee;

    &.active {
      background: #999;
      color: #fff;
    }
  }
}

.attribute {
  background-color: #fff;
  padding: 0 30rpx;
  font-size: 26rpx;
  color: #82848f;
  height: 80rpx;
  position: relative;
}

.atterTxt {
  font-size: 28rpx;
  color: #282828;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  // width: 400rpx;
  margin-left: 20rpx;
}

page {
  background: #fff;
}

.info {
  position: relative;

  .name {
    margin: 20rpx 30rpx 0;
    font-size: 32rpx;
    font-weight: 700;
  }

  .score {
    height: 50rpx;
  }

  .desc {
    margin: 0 30rpx;
    font-size: 24rpx;
    color: #82848f;
    margin-top: 10rpx;
  }

  .shoucang {
    font-size: 18rpx;
    text-align: center;
    color: #666;
    position: absolute;
    top: 10rpx;
    right: 30rpx;
  }
}

.notice-title {
  font-size: 28rpx;
  color: #333;
  margin: 30rpx;
  font-weight: bold;
}

.content {
  margin: 20rpx 30rpx 0;
}
</style>